<template>
  <div class="el-transfer-panel">
    <p class="el-transfer-panel__header">
      <!-- <el-checkbox
        v-show="showAllCheck"
        v-model="allChecked"
        @change="handleAllCheckedChange"
        :indeterminate="isIndeterminate"
      > -->
      {{ title }}
      <!-- </el-checkbox> -->
    </p>

    <div class="el-transfer-panel__body" style="overflow-y: auto">
      <el-input
        v-show="showFilter"
        class="el-transfer-panel__filter"
        :disabled="disabled"
        @mouseenter.native="inputHover = true"
        @mouseleave.native="inputHover = false"
        icon="search"
        size="small"
        placeholder="输入关键字进行过滤"
        v-model="filterText"
      >
      </el-input>
      <el-tree
        ref="transferTree"
        class="filter-tree"
        :data="data"
        node-key="id"
        show-checkbox
        :props="defaultProps"
        :filter-node-method="filterNode"
        hlight-current
        :disabled="disabled"
        :lazy="lazy"
        :load="loadNode"
        :default-expanded-keys="defaultExpandedKeys"
        @check="handleTreeChecked"
        @node-expand="handleNodeExpand"
        @node-collapse="handleNodeCollapse"
      >
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  props: [
    //树列表框名称
    'title',
    //树列表
    'treeInfo',
    'check_info',
    //是否显示查询筛选框
    'showFilter',
    //是否显示全选按钮
    'showAllCheck',
    'disabled',
    'lazy',
    'lazyFn',
  ],
  data() {
    return {
      data: this.treeInfo,
      checkedInfo: this.check_info,
      filterText: '', //搜索框文本
      allChecked: false,
      isIndeterminate: false,
      flatData: [],
      defaultExpandedKeys: [],
      defaultProps: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf',
      },
    }
  },
  watch: {
    filterText(val) {
      this.$refs.transferTree.filter(val)
    },
    check_info: {
      handler: function (val) {
        this.checkedInfo = val
      },
      deep: true,
    },
    treeInfo: {
      handler: function (val) {
        this.data = []
        this.data = JSON.parse(JSON.stringify(val))
      },
      deep: true,
      // immediate: true,
    },
  },
  methods: {
    arrLen(arr) {
      let length = arr.length
      arr.map((item) => {
        if (item.children) {
          length += item.children.length
          if (item.children.children) {
            length += item.children.children.length
          }
        }
      })
      return length
    },
    filterNode(value, data) {
      // if (!value) return true
      return data.visible && data.name.indexOf(this.filterText) !== -1
    },
    async loadNode(node, resolve) {
      this.lazyFn && this.lazyFn(node, resolve)
    },
    handleTreeChecked: function (data, obj) {
      this.checkedInfo = obj.checkedNodes
      this.halfCheckedInfo = obj.halfCheckedNodes
      // let checkedCount = this.checkedInfo.length
      // this.allChecked = checkedCount === this.arrLen(this.data)
      // this.isIndeterminate =
      //   checkedCount > 0 && checkedCount < this.arrLen(this.data)
      this.$emit('listenCheckedInfoEvent', this.checkedInfo)
      this.$emit('listenHalfCheckedInfoEvent', this.halfCheckedInfo)
    },
    //全选
    handleAllCheckedChange(value) {
      if (value) {
        this.$refs.transferTree.setCheckedNodes(this.data)
        this.checkedInfo = this.data
      } else {
        this.checkedInfo = []
        this.$refs.transferTree.setCheckedKeys([])
      }
      this.$emit('listenCheckedInfoEvent', this.checkedInfo)
    },
    handleNodeExpand(data) {
      this.defaultExpandedKeys.push(data.id)
    },
    handleNodeCollapse(data) {
      let arr = [data.id]
      data.children && data.children.forEach((item) => arr.push(item.id))
      this.defaultExpandedKeys = this.defaultExpandedKeys.filter(
        (item) => !arr.includes(item)
      )
    },
    arrayToTree(arr, pid) {
      var tree = []
      var temp
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].parent == pid) {
          var obj = arr[i]
          temp = this.arrayToTree(arr, arr[i].id)
          if (temp.length > 0) {
            obj.children = temp
          }
          tree.push(obj)
        }
      }
      return tree
    },
  },
}
</script>
<style></style>
